<template>
  <div class="allCharts">
  <div id="myChart"></div>
  <div id="myPie"></div>
  <div id="myLine"></div>
  </div>
</template>

<script>
export default {
   name:'echarts',
   mounted(){
       this.initEcharts();
   },
   methods:{
       initEcharts(){
           //基于准备好的 dom,初始化 eacharts 实例
           //柱状图
           let myChart = this.$echarts.init(document.getElementById('myChart'))
           //绘制图表
           myChart.setOption({
               title: { text: '科目学生学习人数分布',left: 'center'},
               tooltip: {},
               xAxis: {
                   data: ["前端","后端","大数据","图书管理系统"]
               },
               yAxis: {},
               series: [{
                  type: 'bar',
                  data: [5, 20, 36, 10, 10, 20]
                }]
           })
           //饼状图
           let myPie = this.$echarts.init(document.getElementById('myPie'))
           myPie.setOption({
                title: {
                    text: '学生学习进度表',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: '已学完' },
                        { value: 735, name: '项目阶段' },
                        { value: 580, name: '开始学' },
                        { value: 484, name: '中间阶段' },
                        { value: 300, name: '快结束阶段' }
                    ],
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
           })
           //折线图
           let myLine = this.$echarts.init(document.getElementById('myLine'))
           myLine.setOption({
                title: {
                    text: '不同方向学生学习总时长',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['三个月', '六个月', '九个月', '十二个月', '一年', '一年以上']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    name: '前端',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                    name: '后端',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                    name: '大数据',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                    name: '图书管理系统',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320]
                    }
                ]
           })
       }
   }
}
</script>

<style scoped>
  #myChart,#myPie,#myLine {
      width: 350px;
      height: 350px;
      border:3px solid #ccc;    
  }
  .allCharts{
      display: flex;
      justify-content: space-around;
  }

</style>